<!DOCTYPE html>
<html>
<head>
    <title>奥特曼打小怪兽</title>
</head>
    <style type="text/css">
    * { margin: 0px; padding: 0px; }
    html {
        height: 100%;
    }
    body{
        background-image: url("image/background.jpg");
        background-position: center;
        background-size: cover;
    }

        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 300px;
            height: 300px;
            margin:100px auto;
        }
        tr{
            height: 120px;
        }
        td{
            width: 160px;
        }
        
    </style>
    <body>
        <div class="main">
        <form>
            <div class="curResult">
                <input type="text" id="time" value="剩余时间"/>
                <input type="text" id="put" value="打到0个"/>
            </div>
            <div>
            <table frame="box" rules="all">
                <tr>
                    <td id="0" onclick="onClick(this)" state="no"></td>
                    <td id="1" onclick="onClick(this)" state="no"></td>
                    <td id="2" onclick="onClick(this)" state="no"></td>
                </tr>
                <tr>
                    <td id="3" onclick="onClick(this)" state="no"></td>
                    <td id="4" onclick="onClick(this)" state="no"></td>
                    <td id="5" onclick="onClick(this)" state="no"></td>
                </tr>
                <tr>
                    <td id="6" onclick="onClick(this)" state="no"></td>
                    <td id="7" onclick="onClick(this)" state="no"></td>
                    <td id="8" onclick="onClick(this)" state="no"></td>
                </tr>
            </table>
         </div>
         <input type="button" onclick="start()" value="开始"/>
        </form>
        <div/>
    </body>

</html>

<script>
    var curCount;
    var ranCount;
    var curTotal=0;
    var Count = document.getElementsByTagName("td");
    var time = 10;  //初始时间为10
    var overRandom;
    var overClear;
    var overSub;
    
    function randomCount(){
        var ran = Math.random()*9|0;//随机一个1到9的数
        curCount = document.getElementById(ran);
        curCount.style.backgroundImage="url(image/monster.jpg)"; //背景图片为地鼠出现
        curCount.style.backgroundSize="cover";
        curCount.state="yes";                            
        ranCount=ran;
    }
    //清空9个方格
    function clear(){
        for(var i=0;i<9;i++){
           var forCount = document.getElementById(i);
           forCount.style.backgroundImage="url(image/.jpg)";
           forCount.style.backgroundSize="cover";
           forCount.state="no";
        }
    }
    //点击砸中地鼠
    function onClick(v){
        
        if(v.state=="yes"){
        v.style.backgroundImage="url(image/迪迦.webp)";
        v.style.backgroundSize="cover";
        curTotal++;
        document.getElementById("put").value="打到"+curTotal+"个";
        }
        
    }
    //时间减少
    function timeSub(){
        time--;
        document.getElementById("time").value="剩余时间"+time+"s";
        if(time<=0){
            window.clearInterval(overRandom);
            window.clearInterval(overClear);
            window.clearInterval(overSub);
            clear();
            alert("游戏结束，你打到了"+curTotal+"个");
        }
    }
    //用定时器周期生成和清空地鼠
    function start(){
     time=10;
     curTotal=0;
     overRandom = window.setInterval("randomCount()",600);
     overClear = window.setInterval("clear()",2100);
     overSub = window.setInterval("timeSub()",1000);
    }
</script>
